<template>
  <div id="team-joined-page">
    <h2>我加入的队伍</h2>
    <div v-if="isLoading" class="loading">
      <van-loading type="spinner" />
    </div>
    <div v-else-if="userJoinTeams.length === 0" class="empty-content">
      <span>你还没有加入任何队伍</span>
      <van-button class="action-button" type="primary" @click="toFindTeam">去寻找队伍</van-button>
    </div>
    <MyTeamCardList v-else :userTeams="userJoinTeams" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import { TeamType } from '../../models/team';
import MyTeamCardList from '../../components/MyTeamCardList.vue';
import myAxios from '../../plugins/myAxios';

const router = useRouter();
const userJoinTeams = ref<TeamType[]>([]);
const isLoading = ref(true);

onMounted(async () => {
  await loadUserJoinTeams();
});

// 加载用户加入的队伍
const loadUserJoinTeams = async () => {
  isLoading.value = true;
  try {
    const res = await myAxios.get('/team/list/my/join');
    if (res?.code === 0) {
      userJoinTeams.value = res.data;
    } else {
      showToast('获取我加入的队伍失败');
    }
  } catch (error) {
    console.error('获取我加入的队伍失败', error);
    showToast('获取我加入的队伍失败');
  } finally {
    isLoading.value = false;
  }
};

// 前往寻找队伍
const toFindTeam = () => {
  router.push('/team');
};
</script>

<style scoped>
#team-joined-page {
  padding: 16px;
}
h2 {
  text-align: center;
  margin-bottom: 24px;
  color: #333;
}
.loading {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}
.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
  color: #999;
}
.empty-content span {
  margin-bottom: 16px;
}
.action-button {
  width: 50%;
}
</style>